本節大綱

• 前言
• 如何使用 Create Next App 建立專案
• 如何在 Next.js + TS 專案設置 ESLint 和 Prettier
• 其它
• 參考資料
• 結論

前言

最近在上區塊鏈的課程，最後課程的結束前，需要小組做一個畢業專案，目前小組決定要使用 Next.js 來開發。

剛好前兩天是分享 React 與 TypeScript 的 ESLint 與 Prettier 教學。哪也就把研究如何在 Next.js、TS 專案設置教學分享給您們。

如何使用 Create Next App 建立專案

Create Next App

在建立 React 專案時，我們可以使用 CRA 工具，哪在建立 Next.js 專案時，也有同樣類似的工具 Create Next App 工具可以使用。

Create Next App 這工具能夠快速建立一個 Next.js 專案，並且已經預設包含了許多您可能會用到的工具、設定，像是 ESLint 、Git 等等...

Create Next App 使用說明

跟建立 React 專案使用 CRA 工具類似，建立 Next.js + TS 專案是使用 Create Next App 工具來建立。

本人喜好使用 Yarn 工具，故後續都會使用 Yarn 來做示範。

• 使用 Create Next App 建立專案。
  npx create-next-app@latest
yarn create next-app
pnpm create next-app
• 使用 Create Next App 建立 Next.js + TS專案。
  npx create-next-app@latest --ts
yarn create next-app --typescript
pnpm create next-app --ts

以上 --typescript 可以簡寫為 --ts，這裡可以還看到 Create Next App 有支援 pnpm 工具。另外，這裡會看到建立專案時，哪專案的名字去哪了?別急別急，後續會說明。

這個時候，在使用 Create Next App 建立專案的過程中，會出現詢問您的專案名稱為何?

# 詢問您的專案名稱。
What is your project named?

如何在 Next.js + TS 專案設置 ESLint 和 Prettier

ESLint 介紹

略，請參考 Day 9 | 如何在 React 專案設置 ESLint 和 Prettier。

ESLint 安裝說明

按照官網所說，在 Next.js 11 版以後，ESLint 已經成為在建立專案時的基本配置，其相關配置可透過 .eslintrc.json 檔案查看。

預設的 ESLint 內容如下， 以下這是 Next.js 規範的 ESLint。以下可分位嚴格、基本的 ESLint 設定，如果都沒有，哪就是純自定義的 ESLint 設定。

// 嚴格 ESLint 設定
{
  "extends": "next/core-web-vitals"
}

// 基本 ESLint 設定
{
  "extends": "next"
}

也有加上 ESLint 的 lint 指令。

"scripts": {
  "lint": "next lint"
}

其中在 .eslintrc.json 檔案中的設定已經包含了大部分 React 會需要的 ESLint plugin。

ESLint 配置

其 "extends": "next/core-web-vitals" 已經包含了大部分 React 會需要的 ESLint plugin，其參考如下。

• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-next

其中 eslint-plugin-next 已經預設有 ESLint 相關的設定。請參考 eslint-plugin-next。

其中 next/core-web-vitals 設定，它將會禁止兩種會影響 core web vitals 的寫法，其 ESLint 的規則都設置為錯誤。

另外，在 ESLint 為警告 (Danger) 時，在使用 git commit 時絕對無法通過 lint 檢查。

Prettier 介紹

略，請參考 Day 9 | 如何在 React 專案設置 ESLint 和 Prettier。

Prettier 安裝說明

首先，要先說明，按照官網所介紹，Prettier 並不能正常使用，經過反覆的查文章跟確認後，等等的 Prettier 設定，會跟官網的說明稍有不同。

• 安裝 eslint-config-prettier 套件，其目的為關閉所有不必要或可能 ESLint 與 Prettier 衝突的規則。
• 新增 "prettier" 到 "extends" 的陣列裡在您的 .eslintrc.* 檔案 (這裡是 .eslintrc.json)，並且要放在最後一個位置，來覆蓋其他配置(官網說明)。

按照官網所說，要把 prettier 放在最後面：

{
  "extends": [
    // ...,
    "prettier"
  ]
}

但是，經過測試之後，要改成如下，Prettier 才會正常作用：

{
  "extends": [
    "next/core-web-vitals",
    "plugin:prettier/recommended",
    "prettier"
  ]
}

• 在您的專案目錄，新增 .prettierrc.* (本人喜好是 .prettierrc.json) 設定檔案，並加上以下格式化的規則。

// 其中 jsxSingleQuote，這是指在 jsx 裡也是使用單引號規則。
{
  "printWidth": 100,
  "useTabs": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "all"
}

• 在您的專案目錄，新增 .prettierignore 排除檔案，並加上以下要排除格式化的目錄。

.github
.husky
dist
node_modules

其它

其執行的時候您可以執行 npm run lint 或 yarn lint。

另外，如果您的專案，並沒有 ESLint 配置的話，當您執行 yarn lint 的時候，會出現以下對話筐，再透過以下對話筐來安裝 ESLint 跟配置，也是可以的。

# 通常選擇第一項
# How would you like to configure ESLint?

❯ Base configuration + Core Web Vitals rule-set (recommended)
  Base configuration
  None

參考資料

• Next.js
• eslint-plugin-react
• eslint-plugin-react-hooks
• @next/eslint-plugin-next
• Day19 - 寫出更有品質的程式碼，信 eslint 得永生
• Prettier integration doesn't seem to work

結論

透過以上的教學，現在的您在撰寫 Next.js 專案時，可以透過 ESLint 與 Prettier 的互相搭配，撰寫統一風格的程式碼。